import React, { useEffect } from 'react'
import { ActionSheet } from '@/components/sp-page-components'
import {AtCheckbox} from 'taro-ui'
import { SpLoading, SpFilterButton } from '@/components'
import { View, ScrollView, Image } from '@tarojs/components'
import { useImmer } from 'use-immer'
// import './index.scss'


const initState = {
  //key 为 '${parent_id}_${parent_name}' value为子数组
  // selectedSpecs: {},
  checkedList: []
}

const FormCheckbox = (props) => {
  const {
    visible,
    onClose: onCloseProp = () => {},
    onCancel = () => {},
    title,
    selectedSpecs,
    dataSource =[{
      value: 'list1',
      label: 'iPhone X',
      desc: '部分地区提供电子普通发票，用户可自行打印，效力等同纸质普通发票，具体以实际出具的发票类型为准。'
    },{
      value: 'list2',
      label: 'HUAWEI P20'
    },{
      value: 'list3',
      label: 'OPPO Find X',
      desc: '部分地区提供电子普通发票，用户可自行打印，效力等同纸质普通发票，具体以实际出具的发票类型为准。',
    },{
      value: 'list4',
      label: 'vivo NEX',
      desc: '部分地区提供电子普通发票，用户可自行打印，效力等同纸质普通发票，具体以实际出具的发票类型为准。',
  }],
    onConfirm: onChangeProp = () => {}

  } = props

  const [state, setState] = useImmer(initState)

  
  const { checkedList } = state

  useEffect(() => {
    console.log('slectlist====='+ checkedList)
     setState((_state) => {
    _state.checkedList = selectedSpecs
  })
  }, [])

 
  const handleChange =  (value) => {
    // this.setState({value})
    setState((_val) => {
      _val.checkedList = value
    })
  }
  const handleConfirm = () => {
    onChangeProp(checkedList)
  }
  

  return (
    <ActionSheet
      visible={visible}
      onClose={onCloseProp}
      onCancel={onCancel}
      title={title}
      className='sp-spec-selector'
      onConfirm={handleConfirm}
    >
      <AtCheckbox
        options={dataSource}
        selectedList={checkedList}
        onChange={handleChange.bind(this)}
      />
      {/* {dataSource.length > 0 ? (
        <ScrollView className='sp-spec-selector-scrolllist' scrollY>
          {dataSource.map((dataItem, idx) => {
            const buttons = dataItem.attribute_values.list

            return (
              <View className='sp-spec-selector-scrolllist-item' key={idx}>
                <View className='item-attr-name'>{dataItem.attribute_name}</View>
                <View className='item-attr-content'>
                  {buttons.map((item) => (
                    <View
                      className={classNames('item-attr-content-button', {
                        'active': allSelectIds.some((_item) => _item === item.attribute_value_id)
                      })}
                      onClick={() => {
                        handleClickAttr(item, dataItem)
                      }}
                      key={item.attribute_value}
                    >
                      {item.attribute_value}
                      <Image src={selected_img} className='selected_img' />
                    </View>
                  ))}
                </View>
              </View>
            )
          })}
        </ScrollView>
      ) : (
        <SpLoading />
      )} */}
    </ActionSheet>
  )
}

export default FormCheckbox
